<template>
  <div class="fromEdit">
    <div  class="content">
      <el-button size="mini" style="margin-bottom:10px;"  @click="$router.go(-1)"><i class="el-icon-back"></i>返回上一页</el-button>
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="流程参数" name="1">
          <div class="centerContent" v-if="options.length != 0 && sourceBlag">
            <div class="cenOne">
              <el-form :model="blruleForm" :rules="blrules" ref="blruleForm" label-width="150px" class="demo-ruleForm autoFrom">
                <el-form-item 
                  v-for="(item, index) in options" 
                  :key="index" 
                  :prop="item.filedName" 
                  :label="item.filedCnName">
                  <el-input disabled v-model="item.external_parameter_value" clearable></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="tabUserList2[keys].name"
          v-for="(keys, index) in listKey"
          :key="index"
          :name="index + 2"
        >
          <div class="cenOnen" v-if="activeName==`${index+2}`">
            <div 
            style="text-align: right;">
            </div>
            <div>
              <el-table
              :pagination="true"
              :data="addListPage[keys]"
              border
              class="tableAutoBtn"
              max-height="550"
              :header-cell-style="{ background: '#f2f5f8' }"
            >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50">
            </el-table-column>
              <qttableedit
                v-for="(item, index) in tabUserList2[keys].column"
                :key="index"
                :header="item"
              ></qttableedit>
            </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="附件" :name="listKey.length+2">
          <div class="centerContent">
            <div class="cenOne">
              <el-form :model="fileForm" :rules="fileRules" ref="blruleForm2" label-width="160px" class="demo-ruleForm autoFrom2">
                <el-form-item 
                  v-for="(item, index) in fileOptions" :key="index"
                  :prop="item.filedName" 
                  :label="item.fileType+'：'">
                <div class="fileNamePar" @click="previewFile(fileObjList[item.fileType],-1)" style="color:#999;cursor: pointer;">
                  <p class="fileName">{{ fileObjList[item.fileType] }}</p>
                  <span title="点击预览" v-if="fileObjList[item.fileType]" style="margin-left:10px;">
                    <svg-icon style="font-size:16px;color:#ff4949;position: relative;top:3px;" icon-class="yl2"/>
                  </span>
                </div>
                </el-form-item>
              </el-form>
            </div>
          </div>  
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  
<script>
import qttableedit from '../components/qt_header_table_noedit'
import request from '@/utils/request'
export default {
  components: {qttableedit },
 
  data() {
    return {
      fileObjList:{},
      fileForm:{},
      fileRules:{},
      fileOptions:[],
      addListPage:{},
      sourceBlag:true,
      tabUserList2:[], 
      listKey: [], 
      activeName: '1',
      ruleForm: {},
      options: [],
      blrules: {},
      blruleForm:{},
    };
  },
  created() {
        this.listKey = []
        this.tabUserList2 = {}
        let obj = JSON.parse(this.$route.query.item)
        if(obj.structs.paramStruct){
          let lccs = obj.structs.paramStruct
          lccs.forEach((item,index)=>{
            item.external_parameter_value = obj.datas.param[item.filedName]
          })
          this.options = lccs
        }

        if(obj.structs.dataStruct){
          let tableCol = obj.structs.dataStruct 
          tableCol.forEach((item,index)=>{
            this.tabUserList2[item.place] = item
            this.listKey.push(item.place)
            this.addListPage[item.place] = obj.datas.data[item.place]||[]
          })

          // console.log(this.listKey)
          // console.log(tableCol)
          // this.listKey.forEach((item,index)=>{
          //     console.log(item)
          // })


        }

        if(obj.structs.filesStruct){
          let fjList = obj.structs.filesStruct
          this.fileOptions = fjList
          fjList.forEach((item,index)=>{
            obj.datas.files.forEach((citem,cindex)=>{
              if(citem.fileType==item.fileType){
                this.fileObjList[item.fileType] = citem.filePath
              }
            })
          })
        }
        
  },
  methods: {
    previewFile(v,i){
      if(!v||i!=-1){
        return
      }
      console.log(i)
      request({
        url: '/ht-bpmn/activiti/downloadFileSign?url='+v,
        method: 'post',
        data:{}
      }).then((res) => {
         if(res.code==200){
            window.open(res.data)
         }
      })
    },
  }
};
</script>
  
<style lang="scss" scoped>
.el-form-item__content{
  position: relative;
}
.fileNamePar{
  width:300px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0px;
}
p.fileName{
  max-width:270px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
i.fileClose{
  position: absolute;
  left:400px;
  top: 10px;
  color: #bcc5ff;
  cursor: pointer;
}
i.fileClose:hover{
  color: #ff0000;
}
>>>.el-upload-list{
  display: none;
}
>>>.el-upload-list{
    position:absolute !important;
    left:100px !important;
    top:-6px !important;
}
.autoFrom{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  .el-form-item{
    width: 33%;
  }
}
.autoFrom2{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  .el-form-item{
    width:40%;
  }
}
.fromEdit {
  padding: 20px 0;
  .content{
    padding:10px 20px;
    // border-bottom:2px solid #f2f5f8;
    >p{
      padding-left: 5px;
      border-left:5px solid #2778bd;
      font-weight: bold;
      margin-bottom: 20px;
      font-size: 15px;
    }
  }
  .content1{
    min-height:160px;
    .item{
      display: flex;
      flex-direction: row;
      span{
        width:80px;
        height: 80px;
        background:rgb(219, 219, 219);
        border-radius: 100%;
      }
    }
    .userInfo{
      margin-left: 20px;
      p{
        line-height: 25px;
        font-size: 14px;
        letter-spacing:1px;
      }
      p:nth-child(1){
        font-size: 16px;
        font-weight: bold;
        color: #2778bd;
      }
      p:nth-child(3){
        color: #999;
        font-size: 10px;
      }
    }
  }
}
.cenOne {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  > p,
  > div {
    width: 33%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    label {
      display: inline-block;
      width: 22%;
      text-align: right;
      font-weight: normal;
      line-height: 33px;
    }
  }
}
.cenOnen{ 
  
}
.centerContent {
  min-height: 20px;
  margin: 10px 0;

  .cenTwo {
    margin-bottom: 10px;
    > div {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 10px;
      margin-top: 10px;
      .el-input {
        width: 10%;
      }
      > p {
        margin-bottom: 10px;
        margin-top: 10px;
      }
      label {
        display: inline-block;
        width: 120px;
        text-align: right;
        line-height: 33px;
      }
    }
  }
}
</style>